<template>
	<view class="home-container">
		<view class="top-container">
			<view class="personal-container">
				<view class="avater-container"><image :src="avaterURL" mode="aspectFill" class="avater"></image></view>
				<text class="username">{{ username }}</text>
			</view>
			<view class="backgroundbox"><image src="../../static/home/panel.png" mode="aspectFit"></image></view>
			<view class="record-container">
				<view class="record-child record-left">
					<text>已学单词</text>
					<text class="bigfont">{{ learnedNum }}</text>
				</view>
				<view class="record-middle">|</view>
				<view class="record-child record-right" @click="showMark">
					<text>打卡天数</text>
					<text class="bigfont">{{ markDay }}</text>
					<uni-popup ref="popup" type="bottom">
						<view class="mark-role">
							打卡规则
						</view>
					</uni-popup>
				</view>
				
			</view>
		</view>
		<view class="middle-float"><word-control :surplusWordNum="surplusWordNum"></word-control></view>
		<view class="bottom-container">
			<view class="middle-bottom">
				<view class="order-title">----NO.{{ myRanking }}---</view>
				<view class="bottom-icon-container">
					<view class="icon-child">
						<view><image class="icon" src="@/static/home/data.svg" mode="aspectFill"></image></view>
						<view>真题资料</view>
					</view>
					<view class="icon-child">
						<view><image class="icon" src="@/static/home/order.svg" mode="aspectFill"></image></view>
						<view>今日排名</view>
					</view>
					<view class="icon-child">
						<view><image class="icon" src="@/static/home/increase.svg" mode="aspectFill"></image></view>
						<view>能力进阶</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import wordControl from './wordControl.vue';

export default {
	name: 'home',
	data() {
		return {
			meassage: 'home',
			username: '流绪微梦',
			avaterURL: '../../static/avater.svg',
			learnedNum: 0,
			markDay: 0,
			surplusWordNum: 750,
			myRanking: 1
		};
	},
	methods: {
		showMark() {
			this.$refs.popup.open('center')
		}
	},
	components: {
		wordControl
	}
};
</script>

<style lang="scss" scoped>
.top-container {
	background-color: #f4ea2a;
	height: 40vh;
	font-size: $base-size;
	.personal-container {
		display: flex;
		align-items: center;
		padding: 3vw 0;
		.avater-container {
			width: 10vw;
			height: 10vw;
			background-color: #000;
			display: inline-block;
			border-radius: 6vw;
			 margin: 0 4vw 0 4vw;
			overflow: hidden;
			.avater {
				width: 10vw;
				height: 10vw;
			}
		}
	}
	.username {
		font-size: 33rpx;
	}
	image {
		width: 100vw;
		height: 7vh;
	}
	.record-container {
		display: flex;
		justify-content: center;
		.record-child {
			height: 10vh;
			margin-top: 10rpx;
			font-size: $base-size;
			display: flex;
			flex-direction: column;
		}
		.record-left {
			margin-right: 10vw;
		}
		.record-middle {
			margin: 20rpx;
			color: red;
			font-size: 50rpx;
		}
		.record-right {
			margin-left: 10vw;
		}
	}
}
.mark-role {
	width: 70vw;
	height: 30vh;
	border-radius: 4vw;
	background-color: $base-color;
}
.bigfont {
	font-size: 83rpx;
	font-weight: bold;
	text-align: center;
}
.middle-float {
	height: 30vh;
	border-radius: 2vw;
	position: absolute;
	background-color: #ffffff;
	left: 5vw;
	right: 5vw;
	top: 33vh;
	box-shadow: 0 0 8vw 1.5vw #dadada;
	padding: 2vw;
}
.middle-bottom {
	padding-top: 27vh;
	.order-title {
		text-align: center;
	}
	.bottom-icon-container {
		display: flex;
		justify-content: space-around;
		.icon-child {
			// height: 10vh;
			// width: 33vw;
			margin-top: 0.5vh;
			font-size: 30rpx;
			text-align: center;
			display: flex;
			flex-direction: column;
			.icon {
				height: 7vh;
				width: 10vw;
			}
		}
	}
}
</style>
